<template>
  <div>
    <!-- 邀请及被邀请人及老用户子页面 -->
    <el-form ref="form1" :model="form1" label-width="150px" :inline="true">
      <el-row>
        <div v-if="this.title == 'six'">
          <el-col :span="24">
            <el-form-item label="是否开老用户参与">
              <el-switch v-model="form1.is_join_old" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item prop="old_res_image_ids" label="领取海报结果">
              <newUpload ref="uploadImg" :fileNum="1" :file-list="fileList" :size-number="2"></newUpload>
            </el-form-item>
          </el-col>
        </div>
        <div v-if="this.title !='six'">
          <el-col :span="8">
            <el-form-item label="金币奖励">
              <el-input v-model="form1.gold_num" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银币奖励">
              <el-input v-model="form1.silver_num" clearable />
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <div class="mb_20">
      <el-button type="primary" @click="handlePrize">配置优惠券奖品</el-button>
    </div>
    <div class="listDiv">
      <el-table ref="tableData" :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50" align="center" />
        <el-table-column label="奖品名称" prop="type_name" align="center" />
        <el-table-column label="数量" prop="tiket_count" align="center" />
        <el-table-column label="有效期" prop="office" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.start_ticket_time}}~{{scope.row.end_ticket_time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt_20">
      <el-button type="primary" @click="handleSubmit" :disabled="disabled">提交</el-button>
    </div>
    <el-dialog title="奖品配置" :visible.sync="dialogFormVisible" width="60%" @close="close" center>
      <el-form ref="form2" :model="form2" :inline="true" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="优惠券名称">
              <el-input v-model="form2.keyword" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="listDiv">
        <el-table
          ref="tableData1"
          :data="tableData1"
          style="width: 100%"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
          <el-table-column fixed type="index" label="序号" width="50" align="center" />
          <el-table-column prop="type_name" label="优惠券名称" align="center" />
          <el-table-column prop="tiket_count" label="优惠券数量" align="center" />
          <el-table-column prop="type_money" label="有效期" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.start_ticket_time}}~{{scope.row.end_ticket_time}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagesCon">
          <div>
            <el-pagination
              :current-page="form2.page"
              :page-sizes="page_sizes"
              :page-size="form2.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_totals"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <!-- 提交按钮 -->
        <div class="allCenter">
          <el-button type="primary" class="submitBtn" @click="submitFn()">确认</el-button>
          <el-button type="primary" class="submitBtn" @click="dialogFormVisible = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  awardSet,
  coupons,
  submitCoupons,
  UserCoupons
} from "@/api/invitationMange";
import newUpload from "@/components/imgUpload/shopImgUp";
export default {
  components: { newUpload },
  props: ["title", "activeId", "obj"],
  // title为third是被邀请人,为fourth是邀请人,为six是老用户;
  // activeId是填写完基础信息成功提交后返回的;
  // obj是邀请及被邀请人及老用户提交成功后返回的;判断5个页面是否提交成功后返回主列表;
  data() {
    return {
      form1: {
        id: "", //活动id赋值
        gold_num: 0, //金币
        silver_num: 0, //银币
        type: "", //判断是邀请还是被邀请人;1是邀请人2是被邀请人,
        ticket_ids: [], //勾选优惠券id
        is_join_old: "",
        old_res_image_ids: [] //领取海报
      }, //被邀请人奖品配置
      tableData: [], //被邀请列表
      form2: {
        id: "",
        keyword: "",
        page: 1,
        size: 10
      }, //弹窗表单
      dialogFormVisible: false, //弹窗优惠券
      only: "", //页面提交成功返回唯一的字段
      disabled: false, //提交成功后再次查看当前页,提交按钮禁用
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      tableData1: [{}], //弹窗奖品配置
      multipleSelection: [], //勾选优惠券数组
      fileList: []
    };
  },
  mounted() {},
  watch: {
    // 监听父组件传的唯一字段,判断当前页是否提交成功返回的，如果有返回字段则禁用提交按钮
    obj(val) {
      if (val == "a" && this.title == "third") {
        this.disabled = true;
      } else if (val == "b" && this.title == "fourth") {
        this.disabled = true;
      } else if (val == "d" && this.title == "six") {
        this.disabled = true;
      }
    }
  },
  methods: {
    // 弹窗优惠券表
    handleCoupons(data) {
      coupons(data)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData1 = res.data.data;
            this.page_totals = res.data.meta.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
        });
    },

    // 提交邀请及被邀请公用一个接口,老用户接口分开的
    handleSubmit() {
      if (this.activeId) {
        this.form1.id = this.activeId;
        this.form1.type =
          this.title == "third" ? 2 : this.title == "fourth" ? 1 : "";

        if (this.title == "third") {
          //被邀请人
          let data = {
            id: this.form1.id,
            type: this.form1.type,
            gold_num: this.form1.gold_num,
            silver_num: this.form1.silver_num,
            ticket_ids: JSON.stringify(this.form1.ticket_ids)
          };
          if (this.tableData.length > 0) {
            submitCoupons(data)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.only = res.data.data.number;
                  this.$emit("prize", this.title, this.activeId, this.only);
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "warning"
                  });
                }
              })
              .catch(err => {
                this.errorStatus(err.msg);
              });
          } else {
            this.$message({
              showClose: true,
              message: "请点击勾选配置优惠券奖品",
              type: "error"
            });
          }
        } else if (this.title == "fourth") {
          //邀请人
          let data = {
            id: this.form1.id,
            type: this.form1.type,
            gold_num: this.form1.gold_num,
            silver_num: this.form1.silver_num,
            ticket_ids: JSON.stringify(this.form1.ticket_ids)
          };
          if (this.tableData.length > 0) {
            submitCoupons(data)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.only = res.data.data.number;
                  this.$emit("prize", this.title, this.activeId, this.only);
                } else {
                  this.$message({
                    showClose: true,
                    message: res.data.msg,
                    type: "warning"
                  });
                }
              })
              .catch(err => {
                this.errorStatus(err.msg);
              });
          } else {
            this.$message({
              showClose: true,
              message: "请点击勾选配置优惠券奖品",
              type: "error"
            });
          }
        } else if (this.title == "six") {
          this.form1.old_res_image_ids =
            this.form1.is_join_old == 1
              ? this.$refs.uploadImg.submitUpload()[0]
              : "";
          //老用户
          let data = {
            id: this.form1.id,
            ticket_ids: JSON.stringify(this.form1.ticket_ids),
            is_join_old: this.form1.is_join_old,
            old_res_image_ids: JSON.stringify([this.form1.old_res_image_ids])
          };
          //当switch未开时，不用配券
          if (this.form1.is_join_old == 0) {
            this.getOldUser(data);
            //当开启老用户参与时，必须配券
          } else if (this.form1.is_join_old == 1) {
            if (this.tableData.length > 0 && this.form1.old_res_image_ids) {
              this.getOldUser(data);
            } else {
              this.$message({
                showClose: true,
                message: "请点击勾选配置优惠券奖品并选择领取上传海报",
                type: "error"
              });
            }
          }
        }
      } else {
        this.$emit("prize", this.title, this.activeId);
      }
    },
    // 老用户奖品配置提交
    getOldUser(data) {
      UserCoupons(data)
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success"
            });
            this.only = res.data.data.number;
            this.$emit("prize", this.title, this.activeId, this.only);
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          this.errorStatus(err.msg);
          console.log("err", err);
        });
    },
    // 配置优惠券奖品弹窗
    handlePrize() {
      this.dialogFormVisible = true;
      if (this.activeId && this.title == "third") {
        this.form2.id = this.activeId;
        let data = {
          id: this.form2.id,
          page: this.form2.page,
          size: this.form2.size
        };
        this.handleCoupons(data);
      } else if (this.activeId && this.title == "fourth") {
        this.form2.id = this.activeId;
        let data = {
          id: this.form2.id,
          page: this.form2.page,
          size: this.form2.size
        };
        this.handleCoupons(data);
      } else if (this.activeId && this.title == "six") {
        this.form2.id = this.activeId;
        let data = {
          id: this.form2.id,
          page: this.form2.page,
          size: this.form2.size
        };
        this.handleCoupons(data);
      }
    },
    // 弹窗确认
    submitFn() {
      if (this.title == "third") {
        this.dialogFormVisible = false;
        this.tableData = this.multipleSelection;
      } else if (this.title == "fourth") {
        this.dialogFormVisible = false;
        this.tableData = this.multipleSelection;
      } else if (this.title == "six") {
        this.dialogFormVisible = false;
        this.tableData = this.multipleSelection;
      }
    },
    // 优惠券勾选行的id
    getRowKeys(row) {
      if (this.title == "third") {
        return row.id;
      } else if (this.title == "fourth") {
        return row.id;
      } else if (this.title == "six") {
        return row.id;
      }
    },
    // 勾选的数组
    handleSelectionChange(val) {
      let arr = [];
      if (this.title == "third") {
        this.multipleSelection = val;
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      } else if (this.title == "fourth") {
        this.multipleSelection = val;
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      } else if (this.title == "six") {
        this.multipleSelection = val;
        this.multipleSelection.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      }
    },
    // 删除奖品
    handleDelete(index) {
      let arr = [];
      if (this.title == "third") {
        this.tableData.splice(index, 1);
        this.tableData.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      } else if (this.title == "fourth") {
        this.tableData.splice(index, 1);
        this.tableData.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      } else if (this.title == "six") {
        this.tableData.splice(index, 1);
        this.tableData.forEach(item => {
          arr.push(item.id);
        });
        this.form1.ticket_ids = arr;
      }
    },
    // 弹窗优惠券名称查询
    handleSearch() {
      if (this.title == "third") {
        this.form2.page = 1;
        this.handleCoupons(this.form2);
      } else if (this.title == "fourth") {
        this.form2.page = 1;
        this.handleCoupons(this.form2);
      } else if (this.title == "six") {
        this.form2.page = 1;
        this.handleCoupons(this.form2);
      }
    },
    // 优惠券弹窗关闭清空勾选
    close() {
      if (this.title == "third") {
        this.dialogFormVisible = false;
        this.form2 = {
          keyword: ""
        };
        // this.$refs.tableData1.clearSelection();
      } else if (this.title == "fourth") {
        this.dialogFormVisible = false;
        this.form2 = {
          keyword: ""
        };
        // this.$refs.tableData1.clearSelection();
      } else if (this.title == "six") {
        this.dialogFormVisible = false;
        this.form2 = {
          keyword: ""
        };
        // this.$refs.tableData1.clearSelection();
      }
    },

    // 改变页面条数配置优惠券弹窗
    handleSizeChange(val) {
      if (this.title == "third") {
        this.form2.size = val;
        this.handleCoupons(this.form2);
      } else if (this.title == "fourth") {
        this.form2.size = val;
        this.handleCoupons(this.form2);
      } else if (this.title == "six") {
        this.form2.size = val;
        this.handleCoupons(this.form2);
      }
    },
    // 选择页数配置优惠券弹窗
    handleCurrentChange(val) {
      if (this.title == "third") {
        this.form2.page = val;
        this.handleCoupons(this.form2);
      } else if (this.title == "fourth") {
        this.form2.page = val;
        this.handleCoupons(this.form2);
      } else if (this.title == "six") {
        this.form2.page = val;
        this.handleCoupons(this.form2);
      }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    }
  }
};
</script>
<style  scoped>
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mt_20 {
  margin-top: 20px;
}
.allCenter {
  text-align: center;
}
</style>